<template>
  <page-meta :root-font-size="fontsize" style="display: block">
    <div class="collectionrecord">
      <xlNavBar :isShare="isShare" title="收藏记录" :isMark="true" bgc="ff9d49"></xlNavBar>
      <div class="list" v-if="list.length > 0">
        <scroll-view scroll-y></scroll-view>
        <div class="item_wrap" v-for="item in list" :key="item">
          <div class="item_job" v-if="item.job" @click.self="todetail('job', item.job)">
            <image class="istop" v-if="item.job.is_top" src="@/static/images/common/redzhiding.png" mode="scaleToFill" />
            <div class="top">
              <div class="tag" :class="[item.job.status == 3 || item.job.status == 2 ? 'tag_gray_job' : '']">
                {{ getStatusText(item.job, 1) }}
              </div>
              <div class="title">{{ getTitleText(item.job.positions) }}</div>
            </div>
            <div class="content">
              <div class="text">{{ item.job["description"] }}</div>
              <div class="images" v-if="getImageList(item.job['photo_urls']).length">
                <image
                  @click="preview(index, getImageList(item.job['photo_urls']))"
                  v-for="(item2, index2) in getImageList(item.job['photo_urls'])"
                  :key="index2"
                  :src="item2"
                  mode="aspectFill"
                  fit="cover"
                  :style="{ width: '80px', height: '80px' }"
                ></image>
              </div>
            </div>
            <div class="line"></div>
            <div class="bottom">
              <div class="contact_time">收藏时间：{{ item.show_time }}</div>
              <div class="btn" @click.stop="contactEvent(item.job, '老板')" :class="[item.job.status == 3 || item.job.status == 2 ? 'btn_gray_job' : '']">
                <i class="iconfont cydianhua"></i>
                <span>联系老板</span>
              </div>
            </div>
          </div>
          <div class="item_resume" v-if="item.resume" @click.self="todetail('resume', item.resume)">
            <image class="istop" v-if="item.job.is_urgent" src="@/static/images/common/redjiaji.png" mode="scaleToFill" />
            <div class="top">
              <div class="tag" :class="[item.resume.status == 3 || item.resume.status == 2 ? 'tag_gray_job' : '']">
                {{ getStatusText(item.resume, 2) }}
              </div>
              <div class="title">
                {{ getTitleText(item.resume["job_intention"]) }}
              </div>
            </div>
            <div class="content">
              <div class="text">{{ item.resume.content }}</div>
              <div class="images" v-if="getImageList(item.resume['picture_url']).length">
                <image
                  v-for="item2 in getImageList(item.resume['picture_url'])"
                  @click="preview(index, getImageList(item.resume['picture_url']))"
                  :key="item2"
                  :src="item2"
                  mode="aspectFill"
                  fit="cover"
                  :style="{ width: '80px', height: '80px' }"
                ></image>
              </div>
            </div>
            <div class="line"></div>
            <div class="bottom">
              <div class="contact_time">收藏时间：{{ item.show_time || "刚刚" }}</div>
              <div class="btn" @click.stop="contactEvent(item.resume, '对方')" :class="[item.resume.status == 3 || item.resume.status == 2 ? 'btn_gray_resume' : '']">
                <i class="iconfont cydianhua"></i>
                <span>联系对方</span>
              </div>
            </div>
          </div>

					<div class="item_store" @click="todetail('store', item.storefront)" v-if="item.storefront">
            <image class="c-c-top" v-if="item.storefront.is_top" src="@/static/images/common/redzhiding.png" mode="scaleToFill" />
            <view class="c-c-title"  >
              <span class="t-badge"> {{ getStatusText(item.storefront, 3) }} </span>
              {{ item.storefront.store_highlight }}
            </view>
            <view class="c-c-info">
              <view class="i-card">
                <view class="name">
                  {{ item.storefront.monthly_rent }} <span class="unit">元/月</span>
                </view>
                <view class="text">
                  {{
                    (item.storefront.monthly_rent / item.storefront.store_area / 30).toFixed(1)
                  }}元/m²/天
                </view>
              </view>
              <view class="i-card">
                <view class="name">
                  {{ item.storefront.store_area }} <span class="unit">m²</span>
                </view>
                <view class="text">面积</view>
              </view>
              <view class="i-card">
                <view class="name">
                  {{
										item.storefront.is_transfer_fee !== 1
                      ? "无转让费"
											: item.storefront.is_show_transfer_fee === 1
											? (item.storefront.transfer_fee/10000).toFixed(2) + "万元"
											: "面议"
                  }}
                </view>
                <view class="text">转让费</view>
              </view>
            </view>
            <view class="c-c-image" v-if="getImageList(item.storefront['store_image']).length > 0">
              <image
                :style="{ width: '80px', height: '80px' }"
                v-for="img in getImageList(item.storefront['store_image'])"
                @click.self="preview(index, getImageList(item.storefront['store_image']))"
                :key="img"
                :src="img"
                mode="aspectFill"
              />
            </view>
            <view class="c-c-address">
              <view class="a-info">
                收藏时间：{{ item.storefront.show_time || "刚刚" }}
              </view>
              <view class="a-btn" @click.stop="handleContact(item.storefront)" :class="[item.storefront.status == 3 || item.storefront.status == 2 ? 'btn_gray_resume' : '']">
                <i class="iconfont cydianhua"></i>
                免费联系
              </view>
            </view>
          </div>
        </div>
      </div>
      <div class="cr-null" v-else>
        <image class="icon" src="@/pages3/static/null.png" mode="scaleToFill" />
        <div class="info">抱歉，近3个月暂无收藏信息～</div>
      </div>

      <contactPopup
        :title="contactTitle"
        :content="contentText"
        :btnTetx="contactBtnText"
        @submit="makePhoneCall"
        @close="showContactPopup = false"
        :show="showContactPopup"
      ></contactPopup>

      <TipPopup
        :title="tipOption.title"
        :content="tipOption.content"
        :submitText="tipOption.submitText"
        @submitTip="tipOption.submit()"
        @closeTip="closeTip"
        v-if="tipPopup"
      ></TipPopup>
      <ContactBoss
        @submitCall="submitCall"
        @submitIntention="submitIntention"
        @close="closeContactBoss"
        v-if="contactBossPopup"
      ></ContactBoss>
    </div>
  </page-meta>
</template>

<script>
import contactPopup from "./compontents/contactPopup.vue";
import TipPopup from "./components/tipPopup.vue";
import ContactBoss from "./components/contactBoss.vue";

export default {
  name: "collectionrecord",
  components: { contactPopup,TipPopup,ContactBoss },
  data() {
    return {
      fontsize: "",
      list: [],
      isShare: 0,
      showContactPopup: false,
      contactTitle: "",
      contactBtnText: "",
      contentText: "",
      info: null,
      tipPopup: false,
      contactBossPopup: false,
      tipOption: {
        title: "",
        content: "",
        submitText: "",
        submit: () => {}
      },
      showContactPopup: false,
      storeDetail: null,
      userIntegralInfo: null
    };
  },
  onShow() {
    this.getList();
  },
  methods: {
    todetail(type, item) {
      if (item.status == 3) {
        return this.$layer.message("当前信息已关闭");
      }
      if (type == "job") {
        this.$togo("/pages2/jobDetail", {
          id: item.id,
        });
      } else if (type == "resume") {
        this.$togo("/pages2/resumeDetail", {
          id: item.id,
        });
      } else if (type == 'store'){
        this.$togo("/shopPackage/storeDetail?id=" + item.id);
			}
    },
    preview(index, list) {
      uni.previewImage({
        current: index,
        urls: list,
      });
    },
    async getList() {
      let res = await this.$http.requestSync("/collects/list/" + 0);
      if (res.code == 200) {
        this.list = res.datas;
      }
    },
    getImageList(str) {
      if (!str) {
        return [];
      }
      if (str.indexOf(",") > -1) {
        return str.split(",");
      } else {
        console.log([str]);
        return [str];
      }
    },
    //去除逗号
    getTitleText(str) {
      if (str) {
        if (str.indexOf(",") > -1) {
          return str.split(",").join("/");
        } else {
          return str;
        }
      }
    },
    getStatusText(item, type) {
      let status = item.status;
      // 状态 1、生效 2、删除 3、暂停，4待审核，5 审核拒绝
      let str = "";
      if (type == 1) {
        switch (status) {
          case 1:
            str = "招聘中";
            break;
          case 2:
            str = "停止招聘";
            break; 
          case 3:
            str = "停止招聘";
            break;
          case 4: 
            str = "待审核";
            break;
          case 5:
            str = "审核拒绝";
            break;
        }
      } else  if (type == 2) {
        switch (status) {
          case 1:
            str = "求职中";
            break;
          case 2:
            str = "停止求职";
            break; 
          case 3:
            str = "停止求职";
            break;
          case 4: 
            str = "待审核";
            break;
          case 5:
            str = "审核拒绝";
            break;
        }
      } else {
        switch (status) {
          case 1:
            str = "转让中";
            break;
          case 2:
            str = "停止转让";
            break; 
          case 3:
            str = "停止转让";
            break;
          case 4: 
            str = "待审核";
            break;
          case 5:
            str = "审核拒绝";
            break;
        }
      }

      return str;
    },
    async contactEvent(item, text) {
      this.info = item;
      if (item.status == 2 || item.status == 3 || item.status == 4 || item.status == 5) {
        return this.$layer.message("当前信息已关闭");
      }
      let type = item.type == 1 ? 5 : 6;
      this.$throttle(async () => {
        this.$checkLogin(async () => {
          let params = { purpose_id: item.id, type };
          let res = await this.$http.requestSync("/bills/get", params);
          if (res.code == 200) {
            if (
              (res.data.phone && this.$getStoraged("systemInfo").platform == "android") ||
              (res.data.phone && this.$getStoraged("systemInfo").platform == "ios") ||
              (res.data.phone && this.$getStoraged("systemInfo").platform == "devtools")
            ) {
              if (res.data.phone) {
                uni.makePhoneCall({
                  phoneNumber: res.data["phone"].toString(), //电话号码
                });
                return false;
              }
            } else if (res.data.phone) {
              uni.showModal({
                title: "查看手机号",
                content: res.data["phone"].toString(),
                success: function (res) {
                  if (res.confirm) {
                    console.log("用户点击确定");
                  } else if (res.cancel) {
                    console.log("用户点击取消");
                  }
                  this.showContactPopup = false;
                },
              });
              return false;
            }

            // 如果用户积分够的话
            if (res.data.is_ok) {
              this.contentText = `您当前剩余${res.data["user_integral"]}积分可用，是否立即与${text}联系？`;
              this.contactTitle = `与${text}联系需要消耗${res.data["integral"]}积分`;
              this.contactBtnText = `联系${text}`;
              this.showContactPopup = true;
            } else {
              this.contactTitle = `温馨提示`;
              this.contactBtnText = `去获取积分`;
              this.contentText = `当前您的积分不足，是否前往获取积分？`;
              this.showContactPopup = true;
            }
            this.contactInfo = res.data;
          }
        });
      });
    },
    async makePhoneCall() {
      let that = this;
      let type = this.info.type == 1 ? 5 : 6;
      this.$throttle(async () => {
        if (this.contactInfo) {
          if (this.contactInfo.is_ok) {
            let params = {
              purpose_id: this.info.id,
              type,
            };
            let res2 = await this.$http.requestSync("/bills/buy_phone", params);
            if (res2.code == 200) {
              if (
                (res2.data.phone && this.$getStoraged("systemInfo").platform == "android") ||
                (res2.data.phone && this.$getStoraged("systemInfo").platform == "ios") ||
                (res2.data.phone && this.$getStoraged("systemInfo").platform == "devtools")
              ) {
                uni.makePhoneCall({
                  phoneNumber: res2.data["phone"].toString(), //电话号码
                  success: function (e) {
                    that.showContactPopup = false;
                  },
                  fail: function (e) {
                    that.showContactPopup = false;
                  },
                });
              } else if (res2.data.phone) {
                uni.showModal({
                  title: "查看手机号",
                  content: res2.data["phone"].toString(),
                  success: function (res) {
                    if (res.confirm) {
                      console.log("用户点击确定");
                      this.showContactPopup = false;
                    } else if (res.cancel) {
                      console.log("用户点击取消");
                      this.showContactPopup = false;
                    }
                  },
                });
              }
            } else {
              that.showContactPopup = false;
              that.$layer.message(res2.message);
            }
          } else {
            if (this.$isIos() == "IOS") {
              this.$togo("/pages3/myIntegral");
            } else {
              this.$togo("/pages3/integralRechargePage");
            }
          }
        } else {
          this.$layer.message("信息有误,请稍后重试");
        }
      });
    },
    async handleContact(store) {
      this.$throttle(async () => {
        this.$checkLogin(async () => {
          this.storeDetail = store;
          let params = { purpose_id: store.id };
          let res = await this.$http.requestSync(
            "/storefronts/is_contact",
            params,
            "POST"
          );
          if (res.is_contact || res.is_top) {
            this.contactRequest(false, true);
            return;
          }
          if (!res.is_self_pay) {
            this.contactRequest(false);
          } else {
            this.userIntegralInfo = res;
            this.contactBossPopup = true;
          }
        });
      });
    },
    closeTip() {
      this.tipPopup = false;
    },
    async submitCall() {
      this.contactBossPopup = false;
      this.tipPopup = true;
      if (this.userIntegralInfo.is_ok) {
        this.tipOption = {
          title: `与老板联系需要消耗${this.userIntegralInfo.integral}积分`,
          submitText: "联系老板",
          content: `您当前剩余${this.userIntegralInfo.user_integral}积分可用，是否立即与老板联系？`,
          submit: async () => {
            this.contactRequest(true);
          }
        };
      } else {
        this.tipOption = {
          title: "温馨提示",
          submitText: "去获取积分",
          content: "当前您的积分不足，是否前往获取积分？",
          submit: () => {
            if (this.$isIos() == "IOS") {
              this.$togo("/pages3/myIntegral");
            } else {
              this.$togo("/pages3/integralRechargePage");
            }
          }
        };
      }
    },
    async contactRequest(selfPay, top) {
      let params = {
        purpose_id: this.storeDetail.id,
        is_self_pay: selfPay,
        is_top: top || false
      };
      let res = await this.$http.requestSync(
        "/storefronts/contact",
        params,
        "POST"
      );
      if (res.code === 200) {
				if (
					this.$getStoraged("systemInfo").platform == "android" ||
					this.$getStoraged("systemInfo").platform == "ios" ||
					this.$getStoraged("systemInfo").platform == "devtools"
				) {
					uni.makePhoneCall({
						phoneNumber: res.phone,
					});
				} else {
					uni.showModal({
						title: "查看手机号",
						content: res.phone
					});
				}
      } else {
        uni.showToast({
					title: res.message,
					icon: "none",
					duration: 2000,
				});
      }
      this.contactBossPopup = false;
      this.tipPopup = false;
    },
    async submitIntention() {
      let params = {
        purpose_id: this.storeDetail.id
      };
      let res = await this.$http.requestSync(
        "/storefronts/intention",
        params,
        "POST"
      );
      if (res.code === 200) {
        this.$layer.message("提交成功");
      } else {
        this.$layer.message(res.message);
      }
      this.contactBossPopup = false;
    },
    closeContactBoss() {
      this.contactBossPopup = false;
    },
  },
  onLoad(options) {
    if (options.params) {
      let params = JSON.parse(decodeURIComponent(options.params));
      if (params.shareUserId) {
        this.$setStoraged("shareUserId", params.shareUserId);
        this.isShare = 1;
      }
    }
    let designWidth = 37.5; //因设计图的宽度
    let that = this;
    //窗体改变大小触发事件
    uni.onWindowResize(res => {
      console.log("变化后的窗口宽度=", res.size.windowWidth);
      //100*屏幕宽度/设计稿宽度
      that.fontsize = Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
      console.log("字体大小：", that.fontsize);
    });

    //打开获取屏幕大小
    uni.getSystemInfo({
      success(res) {
        console.log("设备信息：", res);
        that.fontsize = Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
        console.log("字体大小：", that.fontsize);
      },
    });
  },
};
</script>

<style lang="scss" scoped>
.collectionrecord {
  background: #fff;

  .list {
    padding: 10px;
    .item_wrap {
      .item_job {
        position: relative;
        min-height: 150px;
        background: #fffcf8;
        box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.0275);
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        border: 1px solid #ffebdb;
        box-sizing: border-box;
        padding: 18px 10px 15px 10px;
        margin-bottom: 10px;
        .top {
          width: calc(100%-39px);
          display: flex;
          align-items: center;
          .tag {
            height: 17px;
            background: rgba(62, 166, 255, 0);
            border-radius: 3px 3px 3px 3px;
            opacity: 1;
            border: 1px solid #ff8822;
            font-size: 12px;
            font-weight: 400;
            color: #ff8822;
            padding: 2px 5px;
            margin-right: 4px;
            flex-shrink: 0;
          }
          .title {
            font-size: 16px;
            font-weight: 600;
            color: #333333;
            @include ell();
          }
        }
        .content {
          .text {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #555555;
            margin: 13px auto 10px;
            line-height: 18px;
            @include ells(2);
          }
          .images {
            margin-bottom: 5px;
            image {
              margin-right: 10px;
            }
          }
        }
        .line {
          height: 1px;
          background: #e4e4e4;
          margin: 0 auto;
        }
        .bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 10px 0 0 0;
          .contact_time {
            font-size: 11px;
            color: #666666;
          }
          .btn {
            width: 89px;
            height: 31px;
            background: #ff8822;
            border-radius: 16px 16px 16px 16px;
            color: #fff;
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 600;

            .iconfont {
              margin: 0 5px 0 12px;
            }
            span {
            }
          }
        }
        .istop {
          position: absolute;
          right: 0;
          top: 0;
          width: 39px;
          height: 36px;
        }
      }
      .item_resume {
        position: relative;
        min-height: 150px;
        box-sizing: border-box;
        padding: 18px 10px 15px 10px;
        margin-bottom: 10px;
        background: #fdfafa;
        box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.0275);
        border-radius: 10px 10px 10px 10px;
        border: 1px solid #ffd5d5;
        .top {
          width: calc(100%-39px);
          display: flex;
          align-items: center;
          .tag {
            height: 17px;
            background: rgba(62, 166, 255, 0);
            border-radius: 3px 3px 3px 3px;
            opacity: 1;
            border: 1px solid #f96f6a;
            font-size: 12px;
            font-weight: 400;
            color: #f96f6a;
            padding: 2px 5px;
            margin-right: 4px;
            flex-shrink: 0;
          }
          .title {
            font-size: 16px;
            font-weight: 600;
            color: #333333;
            @include ell();
          }
        }
        .content {
          .text {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #555555;
            margin: 13px auto 10px;
            line-height: 18px;
            @include ells(2);
          }
          .images {
            image {
              margin-right: 10px;
            }
          }
        }
        .line {
          height: 1px;
          background: #e4e4e4;
          margin: 0 auto;
        }
        .bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 10px 0 0 0;
          .contact_time {
            font-size: 11px;
            color: #666666;
          }
          .btn {
            width: 89px;
            height: 31px;
            background: #f76a6a;
            border-radius: 16px 16px 16px 16px;
            color: #fff;
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 600;

            .iconfont {
              margin: 0 5px 0 12px;
            }
          }
        }
        .istop {
          position: absolute;
          right: 0;
          top: 0;
          width: 39px;
          height: 36px;
        }
      }

      .item_store{
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding: 20px 10px;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        border: 1px solid #dff0ff;
        border-radius: 10px;
        box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.0275);
        background: #f9fcff;
        .c-c-title {
          font-size: 13px;
          color: #555555;
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          .t-badge {
            padding: 4px 5px;
            margin-right: 4px;
            font-size: 10px;
            color: #2c9cfd;
            border-radius: 3px 3px 3px 3px;
            background: rgba(62, 166, 255, 0);
            border: 1px solid #2c9cfd;
          }
        }
        .c-c-info {
          display: flex;
          justify-content: space-around;
          margin: 15px 0;
          .i-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            .name {
              font-weight: 600;
              color: #2c9cfd;
              font-size: 18px;
              .unit {
                font-size: 12px;
              }
            }
            .text {
              margin-top: 5px;
              font-size: 10px;
              color: #999999;
            }
          }
        }
        .c-c-image {
          display: flex;
          margin-bottom: 10px;
          .image {
            margin-right: 10px;
            width: 76px;
            height: 76px;
            border-radius: 6px;
          }
        }
        .c-c-address {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 10px;
					border-top: 1px solid #e4e4e4;
          .a-info {
            display: flex;
            font-size: 11px;
            padding-left: 5px;
            color: #666666;
          }
          .a-btn {
            width: 89px;
            height: 31px;
            background: #f76a6a;
            border-radius: 16px 16px 16px 16px;
            color: #fff;
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 600;

            .iconfont {
              margin: 0 5px 0 12px;
            }
          }
        }
        .c-c-top {
          position: absolute;
          top: -2px;
          right: -2px;
          width: 36px;
          height: 36px;
        }
      }

      .tag_gray_job {
        background: rgba(62, 166, 255, 0) !important;
        border: 1px solid #bfbfbf !important;
        color: #bfbfbf !important;
      }
      .tag_gray_resume {
        background: rgba(62, 166, 255, 0) !important;
        border: 1px solid #bfbfbf !important;
        color: #bfbfbf !important;
      }
      .btn_gray_job {
        background: #ffb678 !important;
        color: #fffefc !important;
      }
      .btn_gray_resume {
        background: #fab2b2 !important;
        color: #fffefc !important;
      }
    }
  }
  .cr-null {
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
      margin-top: 100px;
      width: 180px;
      height: 180px;
    }
    .info {
      margin-top: 10px;
      color: #999999;
    }
  }
}
</style>
